<template>
  <div>
    <van-nav-bar
      title="当前订单"
      right-text="退出"
      @click-right="onClickRight"
      :fixed="true"
    />
    <!-- <div style="height: 44px; border: 1px solid #ccc">
      <van-cell title="选择单个日期" :value="date" @click="show = true" />
      <van-calendar v-model="show" @confirm="onConfirm" />
      <van-icon
        name="notes-o"
        size="20"
        style="position: absolute; left: 16px; top: 72px"
      />
    </div> -->
    <van-pull-refresh v-model="loading" @refresh="onRefresh">
      <van-cell v-for="(item, index) in list" :key="index">
        <p class="code">
          订单编号：{{item.orderId}}
          <span class="sum"
            >￥
            <span>{{item.totalAmount}}</span>
          </span>
        </p>
        <div class="detailInfo">
          <span class="unpaid">订单状态:&nbsp;&nbsp;{{item.statusname}}</span>
          <p>
            车牌号码：
            <span>{{item.carNumber}}</span>
          </p>
          <p>
            泊位编号：
            <span>{{item.berthName}}</span>
          </p>
          <p>
            停车路段：
            <span>{{item.sectionName}}</span>
          </p>
          <p>
            驶入时间：
            <span>{{item.startTime}}</span>
          </p>
          <p>
            停车时长：
            <span>{{item.parkingTime}}</span>
          </p>
          <div class="details" @click="orderDetails(item.berthId)">
            订单详情
            <!-- <router-link to="/orders">订单详情</router-link> -->
          </div>
        </div>
      </van-cell>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: "",
      loading: false,
      show: false,
      list: [
        {
          orderId: "qqq",
          totalAmount: "qqq",
          carNumber: "qqq",
          berthName: "qqq",
          sectionName: "qqq",
          startTime: "qqq",
          parkingTime: "qqq",
          berthId: "",
          statusname:"",
        },
      ],
    };
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        console.log("刷新成功");
        this.loading = false;
      }, 1000);
    },
    // 订单详情
    orderDetails(berthId) {
      console.log(berthId);
      localStorage.setItem("boid", berthId);
      this.$router.push("/orders");
    },
    //预留退出按钮
    onClickRight() {
      this.$router.push("/");
      localStorage.clear;
    },
    formatDate(date) {
      return `${date.getMonth() + 1}月${date.getDate()}`;
    },
    // onConfirm(date) {
    //   this.show = false;
    //   this.date = this.formatDate(date);
    //   // 根据日期查订单显示回卡片当中（未实现）
    //   this.$axios({
    //     url: "/orderListBytime",
    //     method: "get",
    //     params: {
    //       orderTime: this.formatDate(date),
    //       sectionid: localStorage.getItem("sectionid"),
    //     },
    //   })
    //     .then((res) => {
    //       if (res.data.code == 200) {
    //         /////////
    //       }
    //     })
    //     .catch((error) => {
    //       alert("出错了");
    //     });
    // },
  },

  created: function () {
    this.$axios({
      url: "/findNewAllByRoadSectionId",
      method: "get",
      params: {
        roadSectionId: localStorage.getItem("sectionid"),
      },
    })
      .then((res) => {
        if (res.data.code == 200) {
          this.list = res.data.data;
          var boid = res.data.data;
        }
      })
      .catch((error) => {
        alert("出错了");
      });
  },
};
</script>
<style>
.van-cell__value {
  border: 1px solid rgb(188, 188, 188);
  border-radius: 5px;
  box-shadow: 1px 1px 5px rgba(102, 102, 102, 0.349019607843137);
  padding: 0 15px;
}

.sum {
  float: right;
  font-size: 1.5rem;
  margin-top: 5px;
}

.details a {
  color: #ffffff;
}

.details {
  width: 84px;
  height: 30px;
  line-height: 33px;
  text-align: center;
  position: absolute;
  right: 10px;
  bottom: 10px;
  background-color: rgba(134, 134, 134, 1);
  border-radius: 5px;
}
</style>

